<template>
  <div class="questions-preview">
    <!-- 内容主体区 -->
    <el-form v-model="queryForm">
      <el-row class="one">
        <el-col :span="6">
          <span v-if="queryForm.questionType === '1'">【题型】：单选</span>
          <span v-else-if="queryForm.questionType === '2'">【题型】：多选</span>
          <span v-else>【题型】：简答</span>
        </el-col>
        <el-col :span="6">
          <span>【编号】：{{ queryForm.id }}</span>
        </el-col>
        <el-col :span="6">
          <span v-if="queryForm.difficulty === '1'">【难度】：简单</span>
          <span v-else-if="queryForm.difficulty === '2'">【难度】：一般</span>
          <span v-else>【难度】：困难</span>
        </el-col>
        <el-col :span="6">
          <span>【标签】：{{ queryForm.tags }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <span>【学科】：{{ queryForm.subjectName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【目录】：{{ queryForm.directoryName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【方向】：{{ queryForm.direction }}</span>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="24">
          <span>【题干】：</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <span v-html="queryForm.question"></span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" v-if="queryForm.questionType === '1'">
          <span>单选题 选项：(以下选中的选项为正确答案)</span>
          <el-row>
            <el-radio-group :value="1">
              <el-radio v-for="(item, index) in options" :key="index" :label="item.isRight">{{ item.title }}</el-radio>
            </el-radio-group>
          </el-row>
        </el-col>

        <el-col :span="24" v-else-if="queryForm.questionType === '2'">
          <span>多选题 选项：(以下选中的选项为正确答案)</span>
          <el-row>
            <el-checkbox-group :value="[1]">
              <el-checkbox v-for="(item, index) in options" :key="index" :label="item.isRight">{{ item.title }}</el-checkbox>
            </el-checkbox-group>
          </el-row>
        </el-col>
        <el-col :span="24" v-else>
          <span>简答题</span>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="12">
          <span>【参考答案】：</span>
          <el-button type="danger" @click="showVideo">视频答案预览</el-button>
             <div class="video-box" v-if="visible"  >
             <video :src="previewVideoURL" controls autoplay ref="videoRef" class="video-box" ></video>
             </div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="24">
          <span>【答案解析】：</span>
          <span v-html="queryForm.answer"></span>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="24">
          <span>【题目备注】：{{ queryForm.remarks }}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" class="closebtn">
          <el-button type="primary" @click="getQuestionData">关闭</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'QuestionsPreview',
  components: {},
  data () {
    return {
      previewVideoURL: '',
      visible: false
    }
  },
  props: {
    queryForm: {
      type: [Object, Number, String, Array],
      required: true
    },
    options: {
      type: [Array, String],
      required: true
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    getQuestionData () {
      this.$emit('Closebtn', false)
    },
    // 控制视频弹框的显示与隐藏
    showVideo () {
      this.visible = true
      console.log(this.queryForm.videoURL)
      this.previewVideoURL = this.queryForm.videoURL
    },
    pauseVideo () {
      this.$refs.videoRef.pause()
    }
  }
}
</script>

<style scoped lang='scss'>
.one {
  margin-bottom: 10px;
}
.el-radio-group {
  display: flex;
  flex-direction: column;
  align-items: start;
  .el-radio {
    margin-top: 10px;
  }
}
.closebtn {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.video-box {
  width: 360px;
  height: 260px;

}
</style>
